@extends('Admin.layout.layout')
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>品牌列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                        <form action="" method="GET">
                            <div class="col-sm-12">
                                <a href="" class="btn btn-sm btn-success "><i class="fa fa-refresh"></i> 刷新</a>
                                <button type="submit" class="btn btn-sm btn-primary fr"> 搜索</button>
                                <div class="input-group fr10">
                                    <input type="text" placeholder="名称" class="input-sm form-control" name="name" value="{{$search_params['name']}}">
                                </div>
                                <a class="btn btn-sm btn-primary fr10"data-toggle="modal" data-target="#myModal">新增</a>
                                <!-- <a class="btn btn-sm btn-primary "  data-toggle="modal" data-target="#myModal">新增</a> -->
                            </div>
                         </form>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTable" id="editable">
                            <thead>
                                <tr>
                                    <th width="15">
                                        <!-- <input type="checkbox" class="checkall" name="selectall" /> -->
                                    </th>
                                    <th>ID</th>
                                    <th>Logo</th>
                                    <th>BANNER图片</th>
                                    <th>名称</th>
                                    <th>厂家代码</th>
                                    <th>首字母</th>
                                    <th>排序</th>
                                    <th>创建时间</th>
                                    <th class="center">更新时间</th>
                                    <th class="center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(empty($list))
                                <tr class="no-records-found center"><td colspan="9">没有找到匹配的记录</td></tr>
                            @else
                            	@foreach ($list as $key=>$brand)
                                <tr>
                                    <th>
                                        <input type="checkbox" class="checkall" name="checkBox" />
                                    </th>
                                    <td>{{$brand['id']}}</td>
                                    <?php 
                                    $cate_val = "";
                                    $cate_arr=explode(",",str_replace(" ","",$brand['copy_category']));
                                    $a = [];
                                    foreach($cate_arr as $c ){
                                        $a[] = (int)$c;
                                    }
                                    $cate_val = json_encode($a);
                                    ?>
                                    
                                    <input id="cat_{{$brand['id']}}"  type="hidden" value='{{$cate_val}}' />
                                    <td><img width="60" src="{{$brand['logo']}}" id="logo_{{$brand['id']}}"></td>
                                    <td><img width="60" src="{{$brand['pic']}}" id="pic_{{$brand['id']}}"></td>
                                    <td class="center" id="name_{{$brand['id']}}">{{$brand['name']}}</td>
                                    <td class="center" id="code_{{$brand['id']}}">{{$brand['business_code']}}</td>
                                    <td class="center" id="first_{{$brand['id']}}">{{$brand['initial']}}</td>
                                    <td class="center" id="sort_{{$brand['id']}}">{{$brand['sort']}}</td>
                                     <td class="center" >{{$brand['created_at']}}</td>
                                    <td class="center">{{$brand['updated_at']}}</td>
                                    <td class="center">
                                    <input type="hidden" name="cates" id="cates_{{$brand['id']}}" value="{{$brand['copy_category']}}" />
                                        <a href="" class="btn-xs btn-primary " data-id="{{$brand['id']}}" data-toggle="modal" data-target="#editModal">编辑</a>
                                        <a class="btn-xs btn-danger del" data-id="{{$brand['id']}}">删除</a>
                                    </td>
                                </tr>
                              @endforeach
                             @endif    
                            </tbody>
                        </table>
                        <div class="row">
                            @include('Admin.common.paginate', ['page' => $page])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    创建品牌列表
                </h4>
            </div>
            <form class="form-horizontal m-t" id="addForm" method="post" action="{{Request::url()}}/add">
            {{csrf_field()}}
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">Logo：</label>
                    <div class="col-sm-8">
                        <img id="imgContent" style="width: 80px;height: 80px;">
                        <div class="btn-group">
                            <label title="上传图片" for="inputImage" class="btn btn-primary">
                                <input type="file" accept="image/*" name="file" id="inputImage" class="hide" multiple="false"> 上传图片
                                <input type="hidden" value="" id="add_logo" name="add_logo" />
                            </label>
                        </div>
                    </div>
                </div>

                 <div class="form-group">
                    <label class="col-sm-3 control-label">BANNER图片：</label>
                    <div class="col-sm-8">
                        <img id="bannerImgContent" style="width: 80px;height: 80px;">
                        <div class="btn-group">
                            <label title="上传图片" for="bannerInputImage" class="btn btn-primary">
                                <input type="file" accept="image/*" name="file" id="bannerInputImage" class="hide" multiple="false"> 上传图片
                                <input type="hidden" value="" id="add_banner_pic" name="add_banner_pic" />
                            </label>
                        </div>
                    </div>
                </div>
               
                
                <div class="form-group">
                    <label class="col-sm-3 control-label">名称：</label>
                    <div class="col-sm-8">
                        <input id="storename" name="storename" class="form-control" type="text" placeholder="文字标识">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">厂家代码：</label>
                    <div class="col-sm-8">
                        <input id="code" name="code" class="form-control" type="text" placeholder="本字段无需理会，将自动生成，也可自定义填写">
                    </div>
                </div>
                
                
                <div class="form-group">
                    <label class="col-sm-3 control-label" style="float:left;margin-right: 15px;">分类：</label>
                    <div class="input-group col-sm-8">
                        <select data-placeholder="分类" class="chosen-select" multiple style="width:350px;" tabindex="4" id="addcates" name="addcates">
                            <option value="">分类</option>
                             @if(!empty($cates))
                            @foreach ($cates as  $cate)
                            <option value="{{$cate['id']}}">{{$cate['name']}}</option>
                            @endforeach
                            @endif  
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                   <label class="col-sm-3 control-label">首字母：</label>
                    <div class="col-sm-2">
                        <input id="first" name="first" class="form-control" type="text" placeholder="" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">排序：</label>
                    <div class="col-sm-2">
                        <input id="addsort" name="addsort" class="form-control" type="text" placeholder="" value="0">
                    </div>
                </div>
            </div>
             <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="add_submit">
                    确定
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >取消
                </button>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="editModalLabel">
                    修改品牌列表
                </h4>
            </div>
            <form class="form-horizontal m-t" id="editForm"  >
            <div class="modal-body">

                 <div class="form-group">
                    <label class="col-sm-3 control-label">Logo：</label>
                    <div class="col-sm-8">
                        <img id="editImgContent" style="width: 80px;height: 80px;">
                        <div class="btn-group">
                            <label title="上传图片" for="editInputImage" class="btn btn-primary">
                                <input type="file" accept="image/*" name="file" id="editInputImage" class="hide" multiple="false"> 上传图片
                                 <input type="hidden"  name="edit_logo" id="edit_logo"  >
                            </label>
                        </div>
                    </div>
                </div>

                 <div class="form-group">
                    <label class="col-sm-3 control-label">BANNER图片：</label>
                    <div class="col-sm-8">
                        <img id="editBannerImgContent" style="width: 80px;height: 80px;">
                        <div class="btn-group">
                            <label title="上传图片" for="editBannerInputImage" class="btn btn-primary">
                                <input type="file" accept="image/*" name="file" id="editBannerInputImage" class="hide" multiple="false"> 上传图片
                                <input type="hidden"  name="edit_banner_pic" id="edit_banner_pic"  />
                            </label>
                        </div>
                    </div>
                </div>
               

 
                <div class="form-group">
                    <label class="col-sm-3 control-label">名称：</label>
                    <div class="col-sm-8">
                        <input id="editname" name="editname" class="form-control" type="text" placeholder="文字标识">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">厂家代码：</label>
                    <div class="col-sm-8">
                        <input id="editcode" name="editcode" class="form-control" type="text" placeholder="本字段无需理会，将自动生成，也可自定义填写">
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="col-sm-3 control-label" style="float:left;margin-right: 15px;">分类：</label>
                    <div class="input-group col-sm-8">
                        <select data-placeholder="分类" class="chosen-select" multiple style="width:350px;" tabindex="4" id="editcates" name="editcates">
                             @if(!empty($cates))
                            @foreach ($cates as  $cate)
                            <option value="{{$cate['id']}}">{{$cate['name']}}</option>
                            @endforeach
                            @endif  
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                   <label class="col-sm-3 control-label">首字母：</label>
                    <div class="col-sm-2">
                        <input id="editfirst" name="editfirst" class="form-control" type="text" placeholder="" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">排序：</label>
                    <div class="col-sm-2">
                        <input id="editsort" name="editsort" class="form-control" type="text" placeholder="" value="0">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="btn_submit">
                    确定
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >取消
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

    <script src="{{asset('js/plugins/validate/jquery.validate.min.js')}}"></script>
    <script src="{{asset('js/plugins/validate/messages_zh.min.js')}}"></script>
    <script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>
    <script src="{{asset('js/plugins/chosen/chosen.jquery.js')}}"></script>
    <script>
        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorElement: "span",
            errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent().parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            errorClass: "help-block m-b-none",
            validClass: "help-block m-b-none"


        });
        $(document).ready(function () {
          //新增上传图片
            function upload(file,id){
                var reader = new FileReader();  
                //创建文件读取相关的变量  
                var imgFile;  
                //为文件读取成功设置事件  
                reader.onload=function(e) {  
                    imgFile = e.target.result; 
                    $("#"+id).attr('src', imgFile);  
                };  
                //正式读取文件  
                reader.readAsDataURL(file);
            }
            $('#inputImage').change(function(img){
                upload(this.files[0],"imgContent");
                var files =  this.files[0];
                var formFile = new FormData();   
                formFile.append("image", files);
                $.ajax({
                     url: "/uploads/images",
                    type: 'post',
                    data: formFile,
                    dataType:"json",
                    contentType: false,  
                    processData: false, 
                    success: function(data) {
                       $("#add_logo").val(data.path);
                    },
                    error: function(data) {
                       console.log("error");
                    }
                });
            })
           
            $('#bannerInputImage').change(function(img){
                upload(this.files[0],"bannerImgContent");
                var files =  this.files[0];
                var formFile = new FormData();   
                formFile.append("image", files);
                $.ajax({
                     url: "/uploads/images",
                    type: 'post',
                    data: formFile,
                    dataType:"json",
                    contentType: false,  
                    processData: false, 
                    success: function(data) {
                       $("#add_banner_pic").val(data.path);
                    },
                    error: function(data) {
                       console.log("error");
                    }
                });
            })
         

          $('#editInputImage').change(function(img){
                upload(this.files[0],"editImgContent");
                var files =  this.files[0];
                var formFile = new FormData();   
                formFile.append("image", files);
                $.ajax({
                     url: "/uploads/images",
                    type: 'post',
                    data: formFile,
                    dataType:"json",
                    contentType: false,  
                    processData: false, 
                    success: function(data) {
                       $("#edit_logo").val(data.path);
                    },
                    error: function(data) {
                       console.log("error");
                    }
                });
            })
           
            $('#editBannerInputImage').change(function(img){
                upload(this.files[0],"editBannerImgContent");
                var files =  this.files[0];
                var formFile = new FormData();   
                formFile.append("image", files);
                $.ajax({
                     url: "/uploads/images",
                    type: 'post',
                    data: formFile,
                    dataType:"json",
                    contentType: false,  
                    processData: false, 
                    success: function(data) {
                       $("#edit_banner_pic").val(data.path);
                    },
                    error: function(data) {
                       console.log("error");
                    }
                });
            })

            var edit_id = 0;//修改列表的id
            // validate signup form on keyup and submit
            var icon = "<i class='fa fa-times-circle'></i> ";
            //新增
            $("#addForm").validate({
                rules: {
                    storename: "required",
                    first: "required",
                    addcates: "required",
                    addsort: "required",
                },
                messages: {
                    storename: icon + "请输入品牌名称",
                    addcates: icon + "请选择分类",
                    first: icon + "请输入首字母",
                    addsort:icon + "请输入排序"
                },
                submitHandler:function(form){
                    var storename = $('#storename').val();
                    var code = $('#code').val();
                    var categories = $('#addcates').val();
                    var first = $('#first').val();
                    var addsort = $('#addsort').val();
                    var logo = $('#add_logo').val();
                    var banner_pic = $('#add_banner_pic').val();
                    $.ajax({
                        url : '{{Request::url()}}/add',
                        type : 'post',
                        dataType : "json",
                        data : {name:storename,initial:first,sort:addsort,logo:logo,pic:banner_pic,banner_pic:banner_pic,categories:categories,business_code:code},
                        success : function(data) {
                            if (0 == data.code) {
                                layer.alert('添加成功', {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        },
                        
                    });
                }
            });

            $('#editModal').on('show.bs.modal', function (e) {
                edit_id = $(e.relatedTarget).attr("data-id");//编辑时属性的id

                $("#editname").val($("#name_"+edit_id).text());
                $("#editcode").val($("#code_"+edit_id).text());
                $("#editfirst").val($("#first_"+edit_id).text());
                $("#editsort").val($("#sort_"+edit_id).text());
                $("#editImgContent").attr("src",$("#logo_"+edit_id).attr("src"));
                $("#editBannerImgContent").attr("src",$("#pic_"+edit_id).attr("src"));
                $("#editcates").val(eval('('+$("#cat_"+edit_id).val()+')'));
                $("#editcates").trigger('chosen:updated');
             })
            //编辑
            $("#editForm").validate({
                rules: {
                    editname: "required",
                    editcates: "required",
                    editfirst: "required",
                    editsort: "required"
                },
                messages: {
                    editname: icon + "请输入商品名称",
                    editcates: icon + "请选择分类",
                    editfirst: icon + "请输入备注",
                    editsort: icon + "请输入排序"
                },
                submitHandler:function(form){
                    var editname = $('#editname').val();
                    var editcode = $('#editcode').val();
                    var categories = $('#editcates').val();
                    var editfirst = $('#editfirst').val();
                    var editsort = $('#editsort').val();
                    var logo = $('#edit_logo').val();
                    var banner_pic = $('#edit_banner_pic').val();
                    
                    $.ajax({
                    	url : '{{Request::url()}}/'+edit_id+"/edit",
                        type : 'put',
                        dataType : "json",
                        data : {name:editname,initial:editfirst,sort:editsort,logo:logo,pic:banner_pic,banner_pic:banner_pic,categories:categories,business_code:editcode},
                        success : function(data) {
                            if (0 == data.code) {
                                layer.alert("修改成功", {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        }
                    });
                }
            });

          
          $('.del').click(function(){
            var id = $(this).attr('data-id');
            layer.confirm('是否删除？', {
                btn: ['确认', '取消'] //可以无限个按钮
            }, function (index) {
                $.ajax({
                	url: '{{Request::url()}}/'+id+"/delete",
                    type: 'delete',
                    dataType: 'json',
                    data: {'id': id},
                    success: function (data) {
                        if (0 == data.code) {
                            layer.alert("删除成功", {
                                icon: 1
                            }, function () {
                                location.reload();
                            });
                        } else {
                            layer.alert(data.message, {
                                icon: 2
                            });
                        }
                    }
                });
            }, function (index, layero) {
                layer.close(index);
            });
        })

        });
        $(".chosen-select").chosen({width: "92%"});
    </script>
@endsection
